<template>
  <div class="food_container">
    <HeaderTop :headTitle="headTitle" :goBack="true"></HeaderTop>
    <section class="sort_container">
        <!-- 分类 -->
        <div class="sort_item" :class="{choose_type:sortBy == 'food'}">
            <div class="sort_item_container" @click="chooseType('food')">
                <div class="sort_item_border">
                    <span>{{foodTitle}}</span>
                    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
                        <polygon points="0,3 10,3 5,8"/>
                    </svg>
                </div>
            </div>
            <transition name="showlist">
                <section v-show="sortBy==='food'" class="category_container sort_detail_type">
                    <section class="category_left">
                        <ul>
                            <li v-for="(item,index) in category" :key="index"
                                class="category_left_li" :class="{category_active:restaurant_category_id == item.id}"
                                @click="selectCategoryName(item.id, index)">
                                <section>
                                    <img :src="getImgPath(item.image_url)" v-if="index" alt="" class="category_icon">
                                    <span>{{item.name}}</span>
                                </section>  
                                <section>
                                    <span class="category_count">{{item.count}}</span>
                                    <svg v-if="index" width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow" >
                                        <path d="M0 0 L6 4 L0 8"  stroke="#bbb" stroke-width="1" fill="none"/>
                                    </svg>
                                </section>
                            </li>
                        </ul>
                    </section>
                    <section class="category_right">
                        <ul>
                            <li v-for="(item,index) in categoryDetail" :key="index" 
                                class="category_right_li" @click="getCategoryIds(item.id,item.name)">
                                <span >{{item.name}}</span>
                                <span >{{item.count}}</span>
                            </li>
                        </ul>
                    </section>
                </section>
            </transition>
        </div>
        <!-- 排序 -->
        <div class="sort_item" :class="{choose_type:sortBy == 'sort'}">
            <div class="sort_item_container" @click="chooseType('sort')">
                <div class="sort_item_border" >
                    <span>排序</span>
                    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
                        <polygon points="0,3 10,3 5,8"/>
                    </svg>
                </div>
            </div>
            <transition name="showlist">
                <section v-show="sortBy==='sort'" class="sort_detail_type">
                    <ul class="sort_list_container">
                        <li v-for="(item,index) in sortConditionList" :key="index" 
                            class="sort_list_li" 
                            @click="selectSortType(index)">
                            <svg class="li_img">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="item.svgHref"></use>
                            </svg>
                            <section class="li_right">
                                <span class="li_text" :class="{'selected':sortByType===index}">{{item.title}}</span>
                                <svg class="li_img" v-show="sortByType===index">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                                </svg>
                            </section>
                        </li>
                    </ul>
                </section>
            </transition>
        </div>
        <!-- 筛选 -->
        <div class="sort_item" :class="{choose_type:sortBy == 'activity'}">
            <div class="sort_item_container" @click="chooseType('activity')">
                <div class="sort_item_border">
                    <span>筛选</span>
                    <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
                        <polygon points="0,3 10,3 5,8"/>
                    </svg>
                </div>
            </div>
            <transition name="showlist">
                <section v-show="sortBy==='activity'" class="filter_detail_type">
                    <section class="filter_item">
                        <span class="filter_item_title">配送方式</span>
                        <ul class="filter_ul">
                            <li v-for="item in delivery" :key="item.id" @click="chooseDeliveryMode(item.id)">
                                <svg >
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="delivery_mode == item.id? '#selected':'#fengniao'"></use>
                                </svg>
                                <span :class="{selected_filter:delivery_mode == item.id}">{{item.text}}</span>
                            </li>
                            
                        </ul>
                    </section>
                    <section class="filter_item">
                        <span class="filter_item_title">商家属性(可以多选)</span>
                        <ul class="filter_ul">
                            <li v-for="(item,index) in activity" :key="item.id" @click="selectSupportIds(item.id)">
                                <svg v-show="support_ids[index].status">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                                </svg>
                                <span class="filter_icon_name" :style="'color:#'+item.icon_color+';border-color:#'+item.icon_color" v-show="support_ids[index].status===false"> {{item.icon_name}}</span>
                                <span class="filter_name" :class="{selected_filter: support_ids[index].status}">{{item.name}}</span>
                            </li>
                        </ul>
                    </section>
                    <footer class="confirm_filter">
                        <div class="clear_all filter_button_style" @click="clearFilter">清空</div>
                        <div class="confirm_all filter_button_style" @click="submitFilter">确定<span v-if="filterNum">({{filterNum}})</span>
                        </div>
                    </footer>
                </section>
            </transition>
        </div>
    </section>
    <transition name="showcover">
        <div class="coverBg" v-show="sortBy" @click.stop="chooseType('')"></div>
    </transition>
    <section class="shop_list_container">
        <ShopList v-if="latitude" :geohash="geohash"
            :restaurantCategoryId="restaurant_category_id"
            :restaurantCategoryIds="restaurant_category_ids"
            :sortby="sortByType"
            :deliveryMode="delivery_mode"
            :supprtIds="support_ids"
            :confirmSelect="confirmStatus"></ShopList>
    </section>
    
  </div>
</template>

<script>
import HeaderTop from '../../components/header/HeaderTop';
import {mapState ,mapMutations} from 'vuex'
import {msiteAddress ,foodCategory, foodDelivery,foodActivity} from '../../api/getData'
import {getImgPathMixin} from '../../utils/mixin'
import ShopList from '../../components/common/shopList'
export default {
    components:{
        HeaderTop,
        ShopList,
    },
    mixins:[getImgPathMixin],
    data(){
        return {
            geohash:'', // city页面传递过来的地址geohash
            headTitle: "", // msiet页面头部标题
            foodTitle: "", // 排序左侧头部标题
            restaurant_category_id: "", // 食品类型id值
            restaurant_category_ids: "", //筛选类型的id
            categoryDetail:null, // // category分类右侧的详细数据
            delivery:null,
            activity:null,
            support_ids: [], // 选中的商铺活动列表
            sortBy: "", // 筛选的条件
            category:null, // 分类
            sortByType: null, // 根据何种方式排序. sort 中
            delivery_mode: null, // 选中的配送方式
            filterNum: 0 , // 筛选按钮下，选中的个数
            confirmStatus:false, // 确认 filter 状态。
            sortConditionList:[
                {
                    id:1,
                    title:'智能排序',
                    svgHref:'#default',
                },
                {
                    id:2,
                    title:'距离最近',
                    svgHref:'#distance',
                },
                {
                    id:3,
                    title:'销量最高',
                    svgHref:'#hot',
                },
                {
                    id:4,
                    title:'起送价最低',
                    svgHref:'#price',
                },
                {
                    id:5,
                    title:'配送速度最快',
                    svgHref:'#speed',
                },
                {
                    id:6,
                    title:'评分最高',
                    svgHref:'#rating',
                }
            ]
        }
    },
    computed:{
        ...mapState(["latitude", "longitude"]),
    },
    created(){
        this.initData()
    },
    mounted(){
    },
    methods:{
        ...mapMutations(['RECORD_ADDRESS']),
        async initData(){
            //获取从msite页面传递过来的参数
            this.geohash = this.$route.query.geohash;
            this.headTitle = this.$route.query.title;
            this.restaurant_category_id = this.$route.query.restaurant_category_id;
            this.foodTitle=this.headTitle;
            //防止刷新页面时，vuex状态丢失，经度纬度需要重新获取，并存入vuex
            if(!this.latitude){
                const res =await msiteAddress(this.geohash);
                // vuex 保存 经纬度信息
                this.RECORD_ADDRESS(res);
            }
            //获取category分类左侧数据
            this.category = await foodCategory(this.latitude, this.longitude);
            this.category = this.category.filter((item)=>{
                return item.id?true:false;
            })
            this.categoryDetail = this.category.find(item=>{
                return item.id==this.restaurant_category_id
            }).sub_categories;
            //获取筛选列表的配送方式
            this.delivery = await foodDelivery(this.latitude, this.longitude);
            console.log(this.delivery)
            //获取筛选列表的商铺活动
            this.activity = await foodActivity(this.latitude, this.longitude);
            console.log(this.activity)
            this.activity.forEach((item,index)=>{
                this.support_ids[index] = { status: false, id: item.id };
            })
        },
        // 点击顶部三个选项，展示不同的列表，选中当前选项进行展示，同时收回其他选项
        chooseType(type){
            if(this.sortBy !== type){
                this.sortBy=type;
                if(type === 'food'){
                    this.foodTitle="分类";
                }else{
                    this.foodTitle=this.headTitle;
                }
            }else{
                this.sortBy=''
                this.foodTitle=this.headTitle;
            }
        },
        // 点击左侧 食品分类。
        selectCategoryName(id,index){
            this.restaurant_category_id=id;
            this.categoryDetail=this.category.find(item=>{
                return item.id === id
            }).sub_categories;
        },
        //选中右侧列表的某个选项时，进行筛选，重新获取数据并渲染
        getCategoryIds(id, name){
            this.restaurant_category_ids=id;
            this.foodTitle = this.headTitle = name;
            this.sortBy='';// 关闭选择页面
        },
        // 选择 排序模式
        selectSortType(index){
            this.sortByType=index;
            this.sortBy=''; // 关闭选择页面
            this.foodTitle=this.headTitle;
        },
        //筛选选项中的 配送方式
        chooseDeliveryMode(id){
            if(id === this.delivery_mode){// 取消选择
                this.delivery_mode=null;
                this.filterNum--;
            }else if(this.delivery_mode === null){
                this.delivery_mode=id;
                this.filterNum++;
            }else{
                this.delivery_mode=id;
            }
        },
        selectSupportIds(id){
            this.support_ids = this.support_ids.map(item=>{
                if(item.id === id){
                    item.status =!item.status;
                }
                return item;
            })
            //重新计算filterNum的个数
            this.filterNum = this.delivery_mode == null ? 0 : 1;
            this.support_ids.forEach(item=>{
                if(item.status){
                    this.filterNum++;
                }
            })
        },
        clearFilter(){
            this.support_ids = this.support_ids.map(item=>{
                item.status=false;
                return item;
            })
            this.delivery_mode=null;
            this.filterNum = 0;
        },
        // 确认按钮 func
        submitFilter(){
            //状态改变时，因为子组件进行了监听，会重新获取数据进行筛选
            this.confirmStatus = !this.confirmStatus;
            this.sortBy = "";// 关闭选择页面
            this.foodTitle=this.headTitle;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.food_container{
    padding-top: 3.6rem;
}
.sort_container{
    position: fixed;
    top: 1.95rem;
    right: 0;
    width: 100%;
    display: flex;
    z-index: 13;
    background-color: #fff;
    border-bottom: 0.025rem solid #f1f1f1;
    box-sizing: border-box;
    .choose_type{
        color: $blue;
    }
    .sort_item{
        @include sc(0.55rem,#444);
        @include wh(33.3%, 1.6rem);
        line-height: 1.6rem;
        text-align: center;
        .sort_icon {
            vertical-align: middle;
            transition: all 0.3s;
            fill: #666;
        }
        &.choose_type{
            .sort_item_container{
                .sort_item_border{
                    span{
                        color: $blue;
                    }
                }
            }
            .sort_icon{
                fill: $blue;
                transform: rotate(180deg);
            }
        }
    }
    .sort_item_container{
        @include wh(100%, 100%);
        position: relative;
        z-index: 14;
        background-color: #fff;
        box-sizing: border-box;
        padding-top: 0.3rem;
        line-height: 1rem;
        .sort_item_border{
            height: 1rem;
            border-right: 0.025rem solid $bc;
        }
    }
    .category_container{
        display: flex;
        span {
            @include sc(0.5rem, #666);
            line-height: 1.8rem;
        }
        .category_left{
            flex: 1;
            background-color: #f1f1f1;
            height: 16rem;
            overflow-y: auto;
            .category_left_li{
                @include fj;
                padding: 0 0.5rem;
                &.category_active{
                    background: #fff;
                }
                .category_icon{
                    @include wh(0.8rem,0.8rem);
                    vertical-align: middle;
                    margin-right: 0.2rem;
                }
                .category_count{
                    @include sc(0.4rem,#fff);
                    background: #ccc;
                    padding: 0 0.1rem;
                    border: 0.025rem sloid #ccc;
                    margin-right: 0.25rem;
                    border-radius: 0.8rem;
                }
                .category_arrow{

                }
            }
        }
        .category_right{
            flex: 1;
            background-color: #fff;
            padding-left: 0.5rem;
            height: 16rem;
            overflow-y: auto;
            .category_right_li {
                border-bottom: 0.025rem solid $bc;
                @include fj;
                line-height: 1,8rem;
                padding-right: 0.5rem;
                span{
                    color: #666;
                }
            }
        }
    }
    .sort_detail_type{
        width: 100%;
        position: absolute;
        top:1.6rem;
        left: 0;
        border-top: 0.025rem solid $bc;
        background: #fff;
        z-index: 10
    }
    .sort_list_container{
        width: 100%;
        .sort_list_li{
            height: 2.5rem;
            display: flex;
            align-items: center;
            .li_img{
                @include wh(0.7rem,0.7rem);
                margin: 0 0.3rem 0 0.8rem;
            }
            .li_right{
                flex: 1;
                height: 100%;
                padding-right: 0.5rem;
                @include fj;
                align-items: center;
                border-bottom: 0.025rem solid $bc;
                .selected{
                    color: $blue;
                }
            }
            &:nth-last-child(1){
                .li_right{
                    border: none;
                }
            }
            
        }
    }
    .filter_item_container{
        .filter_item_border{

        }
    }
    .filter_detail_type{
        z-index: 11;
        position: absolute;
        width: 100%;
        left: 0;
        top: 1.6rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        .filter_item_title{
            display: block;
            text-align: left;
            text-indent: 0.5rem;
            @include sc(0.4rem,#333);
            height: 1.5rem;
        }
        .filter_ul{
            width: 100%;
            padding: 0 0.5rem;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 0.2rem;
            li{
                @include fj(flex-start);
                align-items: center;
                border: 0.025rem solid #eee;
                width: 4.7rem;
                height: 1.4rem;
                margin-right: 0.25rem;
                border-radius: 0.125rem;
                padding: 0 0.25rem;
                margin-bottom: 0.25rem;
                svg {
                    @include wh(0.8rem, 0.8rem);
                    margin-right: 0.125rem;
                }
                span{
                    @include sc(0.4rem,#333);
                }
                .selected_filter{
                    color: $blue;
                }
                .filter_icon_name{
                    @include wh(0.8rem, 0.8rem);
                    @include fj(center);
                    align-items: center;
                    border: 0.025rem solid $blue;
                    margin-right: 0.2rem;
                    border-radius: 0.2rem;
                }
                .filter_name{

                }
            }
        }
        .confirm_filter{
            display: flex;
            justify-content: space-between;
            background-color: #f1f1f1;
            width: 100%;
            padding: 0.3rem 0.2rem;
            .filter_button_style{
                flex: 1;
                border-radius: 0.3rem;
                height: 1.8rem;
                font-size: 0.8rem;
                line-height: 1.8rem;
            }
            .clear_all{
                margin-right: 0.5rem;
                border: 0.025rem solid #fff;
                background: #fff;
            }
            .confirm_all{
                color: #fff;
                border: 0.025rem solid #56d176;
                background: #56d176;
                span{
                    color: #fff;
                }
            }
        }
    }
}
.coverBg{
    position: fixed;
    z-index: 4;
    @include wh(100%,100%);
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
}
.showcover-enter,
.showcover-leave-to{
    opacity: 0;
}
.showcover-enter-active,
.showcover-leave-active{
    
    opacity: 1;
}

.showlist-enter,
.showlist-leave-to
{
    opacity: 0;
    transform: translateY(-100%);
}
.showlist-enter-active,
.showlist-leave-active{
    transition: all 0.3s;
}
</style>